<template>
    <!-- 导出进行封装 -->
    <div class="statement-content">
        <div class="statement-content-top">
            <div class="statement-content-top-item">
                <div style="background-color: #cfeffe;"></div>
                <p>已离职</p>
            </div>
            <div class="statement-content-top-item">
                <div style="background-color: #a8f8bb;"></div>
                <p>再入职</p>
            </div>
            <div class="statement-content-top-item">
                <div style="background-color:#fedbd7;"></div>
                <p>公司会计</p>
            </div>
            <div class="statement-content-top-item">
                <div style="background-color: #ffe8c9;"></div>
                <p>一级部门</p>
            </div>
            <div class="statement-content-top-item">
                <div style="background-color: #fdfcd5;"></div>
                <p>二级部门</p>
            </div>
        </div>
        <el-button type="primary" @click="exportExcelList">导出</el-button>
    </div>
</template>

<script setup>
import {ref} from "vue"
import ExcelJS from "exceljs";
import FileSaver from "file-saver";
let props =  defineProps({
    statementList: {
        type: Array,
        default: () => []
    },
    exportTitle:{
        type:Array,
        default: () => ['姓名', '手机号', '工号', '部门名称', '公积金个人', '社保个人', '社保企业', '公积金企业', '岗位工资', '应扣税', '福利津贴']
    },
    // 表格名
    exportName:{
        type:String,
        default: () => '工资报表.xlsx'
    }

})
// // 导出excel文件
const exportExcelList = () => {
  // 创建工作簿
  const workbook = new ExcelJS.Workbook();
  // 添加工作表，名为sheet1
  const sheet1 = workbook.addWorksheet("sheet1");
  // 导出数据列表
   // 获取表头所有键
  sheet1.addRow(props.exportTitle);
  const data =  props.statementList
  // 将数据写入工作表
  data.forEach((row) => {
    const values = Object.values(row)
    sheet1.addRow(values);
  });
  // 导出表格文件
  workbook.xlsx.writeBuffer().then((buffer) => {
    let file = new Blob([buffer], {type: "application/octet-stream"});
    FileSaver.saveAs(file,props.exportName);
  }).catch(error => console.log('Error writing excel export', error))
}
</script>

<style scoped lang="scss">
.statement-content {
    margin-top: 10px;
    width: 100%;
    height: 30px;
    display: flex;
    justify-content: space-between;
    height: 60px;
    line-height: 60px;
    font-size: 12px;
}

.statement-content-top {
    display: flex;
    .statement-content-top-item {
        display: flex;
        margin-left: 30px;
        div {
            margin-top: 20px;
            width: 18px;
            height: 18px;
            background-color: aqua;
        }
        p{
            margin-left: 5px;
        }
    }

}
button{
    margin-top: 13px;
}
</style>